<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>基本资料</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.8/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form" lay-filter="userEdit">

    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div id="id_div_name" style="line-height: 38px; font-weight: bold;">...</div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">上次登录</label>
        <div id="id_div_last_login" style="line-height: 38px; font-weight: bold;">...</div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">所属角色</label>
        <div id="id_div_role_select" style="line-height: 38px;">...</div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block" style="width: 100px;">
            <select name="sex" class="layui-select">
                <option value="0">-- 请选择 --</option>
                <option value="1"> 男</option>
                <option value="2"> 女</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">头像</label>
        <div class="layui-input-block">
            <div class="layui-upload">
                <input type="hidden" value="" name="image_path" id="id_hidden_image_path" />
                <button type="button" class="layui-btn layui-btn-xs" id="id_btn_upload">上传图片</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="id_img_upload" style="width: 100px; height: 100px; display: none;" />
                    <p id="id_p_upload"></p>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">Email</label>
        <div class="layui-input-block" style="width: 400px;">
            <input type="text" name="email" lay-verify="email" placeholder="请输入Email地址" autocomplete="off" class="layui-input" />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">手机</label>
        <div class="layui-input-block" style="width: 400px;">
            <input type="text" name="phone" lay-verify="phone" placeholder="请输入手机号" autocomplete="off" class="layui-input" />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">住址</label>
        <div class="layui-input-block" style="width: 600px;">
            <input type="text" name="address" autocomplete="off" placeholder="请输入住址" class="layui-input" />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">个人介绍</label>
        <div class="layui-input-block" style="width: 600px;">
            <textarea placeholder="请输入内容" name="about_me" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>

</div>
<script src="/lib/layui-v2.6.8/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=2.0.0" charset="utf-8"></script>
<script>
    layui.use(['form', 'upload', 'miniTab'], function () {
        var form = layui.form,
            layer = layui.layer,
            upload = layui.upload,
            miniTab = layui.miniTab,
            $ = layui.jquery;

        /* 用户信息 */
        let load = layer.load(2);
        $.get('/admin/user/getCurrent', {'more': 1}, function (re) {
            if (re.code != 0) {
                layer.alert('用户信息加载失败！' + re.msg);
                return false;
            }
            layui.use('watermark', function (watermark) {
                watermark({watermark_txt: re.data.name});
            });
            $('#id_div_role_select').html(re.data.admin_role.name);
            $('#id_div_name').html(re.data.name + ' (ID: ' + re.data.id + ')');
            if (re.data.image_url != '') {
                $('#id_img_upload').attr('src', re.data.image_url);
                $('#id_img_upload').show();
            }
            $('#id_div_last_login').html('地址: ' + re.data.last_ip + ',  时间: ' + re.data.last_login);
            form.val('userEdit', re.data);
            layer.close(load);
        }, 'json');

        // 图片上传
        let uploadInst = upload.render({
            elem: '#id_btn_upload'
            ,url: '/admin/page/uploadImg'
            ,before: function(obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#id_img_upload').attr('src', result); //图片链接（base64）
                    $('#id_img_upload').show();
                });
            }
            ,done: function(res) {
                if(res.code > 0) { // 上传失败
                    return layer.msg(res.msg);
                }
                layer.msg('上传成功。');
                $('#id_hidden_image_path').val(res.data.src);
            }
            ,error: function() {
                let reUpload = $('#id_p_upload');
                reUpload.html('<span style="color: #ff5722;">上传失败</span> <a class="layui-btn layui-btn-xs upload-reload">重试</a>');
                reUpload.find('.upload-reload').on('click', function() {
                    uploadInst.upload();
                });
            }
        });

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            delete data.field.file;
            $.post('/admin/user/me', data.field, function (re) {
                let msg = (re.code == 0 ? '保存成功' : '信息未修改');
                let index = layer.alert(msg, {
                    title: '保存结果'
                }, function () {
                    layer.close(index);
                    if (re.code == 0) {
                        miniTab.deleteCurrentByIframe();
                    }
                });
            }, 'json');
            return false;
        });

    });
</script>
</body>
</html>